<script setup lang="ts" name="PaneConditional">
import { mapState } from 'pinia'
import { useModelerStore } from '@/store/bpmnProcess/modelerStore'
import * as condition from '../../utils/condition'
import { getScriptTypeList } from '../../utils'
import EventEmitter from '@/utils/EventEmitter'
const form = ref({
  type: '',
  conditionType: '',
  expression: 'expression',
  body: '',
  language: '',
  scriptType: '',
  resource: ''
})
const variableVisible = ref(false)
const variableEventVisible = ref(false)
const variable = ref({
  name: '',
  events: ''
})

const scriptTypeList = ref([])

const mapStates = computed(() => {
  return mapState(useModelerStore, ['getActive'])
})

const initData = () => {
  getElementVariables()
  scriptTypeList.value = getScriptTypeList()
  const type = condition.getConditionTypeValue(mapStates.value.getActive())
  if (type === 'expression' || type === 'script') {
    form.value.type = 'condition'
    form.value.conditionType = type
    if (form.value.conditionType === 'expression') {
      getConditionExpression()
    } else {
      getConditionScript()
    }
  } else {
    form.value.type = type
    form.value.conditionType = 'expression'
    form.value.expression = ''
    form.value.body = ''
    form.value.language = ''
    form.value.scriptType = ''
    form.value.resource = ''
  }
}

const getElementVariables = () => {
  variableVisible.value = condition.isConditionEventDefinition(mapStates.value.getActive())
  variable.value.name = condition.getVariableNameValue(mapStates.value.getActive())
  if (variableVisible.value) {
    variableEventVisible.value = !condition.isExtendStartEvent(mapStates.value.getActive())
    variable.value.events = condition.getVariableEventsValue(mapStates.value.getActive())
  }
}
const setElementVariableName = (value) => {
  condition.setVariableNameValue(mapStates.value.getActive(), value)
}
const setElementVariableEvents = (value) => {
  condition.setVariableEventsValue(mapStates.value.getActive(), value)
}

const getConditionExpression = () => {
  form.value.expression = condition.getConditionExpressionValue(mapStates.value.getActive())
}

const getConditionScript = () => {
  form.value.language = condition.getConditionScriptLanguageValue(mapStates.value.getActive())
  form.value.scriptType = condition.getConditionScriptTypeValue(mapStates.value.getActive())
  form.value.body = condition.getConditionScriptBodyValue(mapStates.value.getActive())
  form.value.resource = condition.getConditionScriptResourceValue(mapStates.value.getActive())
}

const setCirculationType = (v) => {
  condition.setConditionTypeValue(mapStates.value.getActive(), v)
}
const setConditionExpression = (value) => {
  condition.setConditionExpressionValue(mapStates.value.getActive(), value)
}
const setConditionScriptLanguage = (value) => {
  condition.setConditionScriptLanguageValue(mapStates.value.getActive(), value)
}
const setElementConditionScriptType = (value) => {
  condition.setConditionScriptTypeValue(mapStates.value.getActive(), value)
}
const setConditionScriptBody = (value) => {
  condition.setConditionScriptBodyValue(mapStates.value.getActive(), value)
}
const setConditionScriptResource = (value) => {
  condition.setConditionScriptResourceValue(mapStates.value.getActive(), value)
}

const eventEmitterListener = () => {
  initData()
}

onBeforeUnmount(() => {
  EventEmitter.removeListener('element-update', eventEmitterListener)
})

onMounted(() => {
  initData()
  EventEmitter.on('element-update', eventEmitterListener)
})
</script>

<template>
  <el-collapse-item name="conditional">
    <template #title>
      <div class="collapse-header">
        <svg-icon icon="ri:filter-fill"></svg-icon>
        <h2>条件设置</h2>
      </div>
    </template>
    <template v-if="variableVisible">
      <el-form-item label="变量名称">
        <el-input v-model="variable.name" maxlength="32" @change="setElementVariableName" />
      </el-form-item>
      <el-form-item v-if="variableEventVisible" label="变量事件">
        <el-input v-model="variable.events" @change="setElementVariableEvents" placeholder="多个变量事件以逗号隔开" />
      </el-form-item>
    </template>
    <el-form-item v-if="!variableVisible" label="流转路径类型">
      <el-select v-model="form.type" @change="setCirculationType">
        <el-option v-for="item in condition.circulationTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <template v-if="form.type === 'condition' || variableVisible">
      <el-form-item label="条件类型">
        <el-select v-model="form.conditionType" @change="setCirculationType">
          <el-option v-for="item in condition.conditionTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <template v-if="form.conditionType !== ''">
        <template v-if="form.conditionType === 'expression'">
          <el-form-item label="表达式">
            <el-input type="textarea" v-model="form.expression" @change="setConditionExpression" />
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="脚本语言">
            <el-input v-model="form.language" @change="setConditionScriptLanguage" />
          </el-form-item>
          <el-form-item label="脚本类型">
            <el-select v-model="form.scriptType" @change="setElementConditionScriptType">
              <el-option v-for="item in scriptTypeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="form.scriptType && form.scriptType === 'inline'" label="脚本内容">
            <el-input type="textarea" v-model="form.body" @change="setConditionScriptBody" />
          </el-form-item>
          <el-form-item v-if="form.scriptType && form.scriptType === 'external'" label="资源地址">
            <el-input type="textarea" v-model="form.resource" @change="setConditionScriptResource" />
          </el-form-item>
        </template>
      </template>
    </template>
  </el-collapse-item>
</template>

<style scoped lang="scss">
.el-collapse-item {
  :deep(.el-collapse-item__header) {

    .collapse-header {
      display: flex;
      flex: 1;
      align-items: center;
      padding: 0 12px;

      .el-icon {
        margin-right: 6px;
        font-size: 20px !important;
      }

      h2 {
        font-weight: bold;
        font-size: 14px;
      }

      .el-button {
        margin-left: 12px;
      }
    }

    .el-icon {
      font-size: 18px;
    }
  }

  :deep(.el-collapse-item__content) {
    padding-right: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
  }
}

.el-form-item {
  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-button.add {
      width: 100%;
      margin: 12px 0 0;
    }
  }
}
</style>
